<template>
  <div>
    <el-col>
      <p style="font-size: 30px">鲜花价格</p>
      <el-form label-position="left" :inline="true">
        <el-form-item label="区服">
          <el-select v-model="selectServer" placeholder="选择区服" :validate-event="true">
            <el-option v-for="s in serverList" :key="s" :value="s" :label="s">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地图">
          <el-select v-model="selectMap" placeholder="选择地图(可选)" :validate-event="true">
            <el-option v-for="s in mapList" :key="s" :value="s" :label="s">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="花名">
          <el-input v-model="flowerName" placeholder="可选"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-col style="margin-bottom: 40px">
      <el-col>
        <p style="font-size: 25px">广陵邑</p>
        <el-col style="display: flex;flex-wrap: wrap;justify-content: flex-start">
          <el-card v-for="g in dataList['广陵邑']" :key="g.name" shadow="hover"
                   style="width: 250px;margin-left: 15px;margin-top: 10px;text-align: center">
            <span style="color: #e01e3c;font-size: 19px;padding: 20px">{{ g.name }}</span><br/>
            <span style="color: blue">{{ g.color }}</span><br/>
            <span style="color:#295717;">倍数: {{ g.price }}</span><br/>
            <span v-for="gp in g.line" :key="gp" style="color: #f5b118">{{ gp }}线 </span>
          </el-card>
        </el-col>
      </el-col>

      <el-col>
        <p style="font-size: 25px">九寨沟·镜海</p>
        <el-col style="display: flex;flex-wrap: wrap;justify-content: flex-start">
          <el-card v-for="g in dataList['九寨沟·镜海']" :key="g.name" shadow="hover"
                   style="width: 250px;margin-left: 15px;margin-top: 10px;text-align: center">
            <span style="color: #e01e3c;font-size: 19px;padding: 20px">{{ g.name }}</span><br/>
            <span style="color: blue">{{ g.color }}</span><br/>
            <span style="color:#295717;">倍数: {{ g.price }}</span><br/>
            <span v-for="gp in g.line" :key="gp" style="color: #f5b118">{{ gp }}线 </span>
          </el-card>
        </el-col>
      </el-col>

      <el-col>
        <p style="font-size: 25px">枫叶泊·天苑</p>
        <el-col style="display: flex;flex-wrap: wrap;justify-content: flex-start">
          <el-card v-for="g in dataList['枫叶泊·天苑']" :key="g.name" shadow="hover"
                   style="width: 250px;margin-left: 15px;margin-top: 10px;text-align: center">
            <span style="color: #e01e3c;font-size: 19px;padding: 20px">{{ g.name }}</span><br/>
            <span style="color: blue">{{ g.color }}</span><br/>
            <span style="color:#295717;">倍数: {{ g.price }}</span><br/>
            <span v-for="gp in g.line" :key="gp" style="color: #f5b118">{{ gp }}线 </span>
          </el-card>
        </el-col>
      </el-col>

      <el-col>
        <p style="font-size: 25px">枫叶泊·乐苑</p>
        <el-col style="display: flex;flex-wrap: wrap;justify-content: flex-start">
          <el-card v-for="g in dataList['枫叶泊·乐苑']" :key="g.name" shadow="hover"
                   style="width: 250px;margin-left: 15px;margin-top: 10px;text-align: center">
            <span style="color: #e01e3c;font-size: 19px;padding: 20px">{{ g.name }}</span><br/>
            <span style="color: blue">{{ g.color }}</span><br/>
            <span style="color:#295717;">倍数: {{ g.price }}</span><br/>
            <span v-for="gp in g.line" :key="gp" style="color: #f5b118">{{ gp }}线 </span>
          </el-card>
        </el-col>
      </el-col>
    </el-col>
  </div>
</template>

<script>
import {MAP_NAME, SERVER_NAME} from "@/constant/constant";
import {ElMessage, ElMessageBox} from "element-plus";
import {j3api} from "@/axios/j3http";

export default {
  name: "FlowerPage",
  data() {
    return {
      serverList: SERVER_NAME,
      mapList: MAP_NAME,
      selectServer: '',
      selectMap: '',
      flowerName: '',
      dataList: {}
    }
  },
  methods: {
    search() {
      j3api.searchFlower({
        server: this.selectServer,
        flower: this.flowerName,
        map: this.selectMap
      }).then(res => {
        this.dataList = res.data

      })
    }
  },
  mounted() {
    const serverName = localStorage.getItem("server_select")
    if (serverName === null) {
      ElMessageBox.confirm('您还未绑定区服,是否现在去绑定', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(() => {
        // ElMessage.success("测试绑定")
        this.$router.push({path: '/setting'})
      }).catch()
      return
    }
    this.selectServer = localStorage.getItem("server_select")
    if (localStorage.getItem("map_select") !== null) {
      this.selectMap = localStorage.getItem("map_select")
    }
  }
}
</script>

<style scoped>

</style>
